import './index.css'
import { useStore } from '../store'
import { observer } from 'mobx-react-lite'
import {useState} from 'react'
import uuid from 'react-uuid'
function Task() {
  const { taskStore } = useStore()
  function onChange(id, e) {
    taskStore.singleCheck(id, e.target.checked)
  }
  function allChange(e){
    taskStore.allCheck(e.target.checked)
  }
  function deltest(id){
    taskStore.delTask(id)
  }

  const [taskValue,setTaskValue] = useState()
  function addTake(e){
    if(e.code=== 'Enter'){
      taskStore.addTask({
        name:taskValue,
        id:uuid(),
        isDone:false
      })
    }
   
  }
  return (
    <section className="todoapp">
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          autoFocus
          autoComplete="off"
          value={taskValue}
          onChange={(e)=>setTaskValue(e.target.value)}
          onKeyUp={addTake}
          placeholder="What needs to be done?"
        />
      </header>
      <section className="main">
        <input id="toggle-all" className="toggle-all" type="checkbox"  checked={taskStore.isAll}
          onChange={allChange}/>
        <label htmlFor="toggle-all"></label>
        <ul className="todo-list">
          {taskStore.list.map((item) => (
            <li
              className={item.isDone ? 'todo completed' : 'todo'}
              key={item.id}
            >
              <div className="view">
                <input
                  className="toggle"
                  type="checkbox"
                  checked={item.isDone}
                  onChange={(e) => onChange(item.id, e)}
                />
                <label>{item.name}</label>
                <button className="destroy" onClick={()=>deltest(item.id)}></button>
              </div>
            </li>
          ))}
        </ul>
      </section>
    </section>
  )
}

export default observer(Task)
